<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width = device-width , initial-scale = 1 , minimum-scale = 1 , maximum-scale = 1 , user-scalable = no">
    <meta name="language" content="en" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="../../resource/css/userImageCutDemo.css" type="text/css" />
    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resource/css/common.css">
    <link rel="stylesheet" href="../../resource/css/style.css">
</head>
<body>
<div id="header"  class="bg-color-2">
    <a href="javascript:void(0)" class="nav-back">返回</a>
    头像
    <span></span>
</div>
<div class="detail-part bg-color-2">
    <div class="detail-head bd-bot">
        <label class="head-image-user" for="head-image"><strong class="target-word">从相册中选择</strong></label>
        <input id="head-image" name="head-image" type=file accept="image/*">
    </div>
</div>
<div class="user-default default-pad">

</div>
<button type="idf-next submit" onclick="perfectInfo()" name="btn-submit" class="btn-submit">下一步</button>
<div class="container" style="display: none">
    <div class="content">
        <div class="component">
            <div class="overlay">
                <div class="overlay-inner">
                </div>
            </div>
            <!-- This image must be on the same domain as the demo or it will not work on a local file system -->
            <!-- http://en.wikipedia.org/wiki/Cross-origin_resource_sharing -->
            <img class="resize-image" id="user-headImage-set" src="" alt="">
            <button class="btn-crop js-crop">Crop<img class="icon-crop" src="http://tympanus.net/Tutorials/ImageResizeCropCanvas/img/crop.svg">
            </button>
        </div>
    </div>
    <!-- /content -->
</div>
<!-- /container -->
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../resource/js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../resource/js/bootstrap.min.js"></script>
<script src="../../resource/js/commonjs.js"></script>
<script src="../../resource/js/register.js"></script>
<script>
    $(function() {
        getUserDetail();
        $(".nav-back").click(function(){
            location.href = "registerPsd.html?url=1";
        })
    });
    /* 预览选择的图片 */
    (function () {
        var viewFiles = document.getElementById("head-image");
        var viewImg = document.getElementById("user-headImage-set");
        function viewFile (file) {
            //通过file.size可以取得图片大小
            var reader = new FileReader();
            reader.onload = function(evt){
                console.log(evt)
                viewImg.src = evt.target.result;
                $(".resize-handle").remove();
                init();
                $(".user-default").hide();
                $(".container").show();
            }
            reader.readAsDataURL(file);
        }
        viewFiles.addEventListener("change", function () {
            //通过 this.files 取到 FileList ，这里只有一个
            viewFile(this.files[0]);
        }, false);
    })();
    if (window.location.protocol == 'file:') {
        alert('To test this demo properly please use a local server such as XAMPP or WAMP. See README.md for more details.');
    }
    // Kick everything off with the target image
    resizeableImage($('.resize-image'));
</script>
</body>
</html>